<template>
  <div class="content">
    <div class="title">
      今日考勤
      <a href="" class="more">更多</a>
    </div>
    <div class="body">
      <table class="table" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>职务</th>
            <th>进场时间</th>
            <th>出场时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.userName }}</td>
            <td>{{ item.workType }}</td>
            <td>{{ item.status }}</td>
            <td>{{ item.appearanceTime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { barChartData } from '@/api/autonym'
export default {
  data() {
    return {
      tableData: [],
      listQuery: {
        keyword: null,
        paymentType: null,
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const res = await barChartData(this.listQuery)
      if (res.code === 200) {
        if (res.data) {
          this.tableData = res.data.list
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 16px;
  border-radius: 2px;
  height: 228px;
  border: 1px solid rgba(221, 221, 221, 0.2);
  .more {
    float: right;
    color: rgba(247, 181, 0, 1);
  }
  .body {
    display: flex;
    .table {
      margin-top: 20px;
      flex: 1;
      table-layout: fixed;
      tr {
        height: 30px;
        th,
        td {
          padding: 0 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      thead {
        background: rgba(247, 181, 0, 0.2);
        th {
          font-size: 13px;
          font-weight: normal;
          text-align: left;
        }
      }
      tbody {
        tr {
          &:nth-child(even) {
            background: rgba(255, 255, 255, 0.1);
          }
        }
        .head-img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
